<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
<head>
	<div th:replace="commons/html-header"></div>
	<link th:href="@{/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css}" rel="stylesheet" />
</head>
<body class="skin-1">

<div th:replace="commons/head"></div>



<div class="main-container" id="main-container">

	<script type="text/javascript">

        try{gds.settings.check('main-container' , 'fixed')}catch(e){}

	</script>

	<div class="main-container-inner">

		<a class="menu-toggler" id="menu-toggler" href="#">

			<span class="menu-text"></span>

		</a>



		<div th:replace="admin/admin-menu"></div>

		<div class="main-content">

			<div class="breadcrumbs" id="breadcrumbs">

				<script type="text/javascript">

                    try{gds.settings.check('breadcrumbs' , 'fixed')}catch(e){}

				</script>



				<ul class="breadcrumb">
					<li>
						<i class="icon-home home-icon"></i>
						<a href="#">Home</a>
					</li>
					<li>
						系统管理
					</li>
					<li>
						登录日志
					</li>
				</ul><!-- .breadcrumb -->

			</div>
			<div class="page-content">

				<div class="page-header">
					<form class="form-inline" role="form">
						<div class="form-group">
							<label class="sr-only" for="c_LOGIN_NAME">账号</label>
							<input type="text" class="form-control" id="c_LOGIN_NAME" placeholder="请输入账号名称" />
						</div>
						<div class="form-group">
							<input type="text" class="form-control date" id="c_START_TIME" readonly="readonly" data-date-format="yyyy-mm-dd" />
						</div>
						<div class="form-group">
							<input type="text" class="form-control date" id="c_END_TIME" readonly="readonly" data-date-format="yyyy-mm-dd" />
						</div>

						<button type="button" id="btn-search" class="btn btn-sm btn-info"><i class="icon-search"></i>查询</button>
					</form>

				</div>

				<div class="row">

					<div class="col-xs-12">
						<div class="table-responsive">

							<table id="tbl" class="table table-striped table-bordered table-hover">
								<thead>
								<tr>

									<th class="center col-sm-1">序号</th>
									<th>账号</th>
									<th>登录IP</th>
									<th>登录时间</th>
									<th>登录结果</th>
									<th></th>
								</tr>
								</thead>
								<tbody>

								</tbody>
							</table>
						</div><!-- /.table-responsive -->
					</div><!-- /.col -->

				</div><!-- /.row -->

			</div><!-- /.page-content -->

		</div><!-- /.main-content -->

	</div><!-- /.main-container-inner -->

	<div class="modal fade" id="detail_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						操作详情
					</h4>
				</div>
				<div class="modal-body">
					<table id="detail_tbl" class="table table-striped">
						<thead>
						<tr>
							<th>账号</th>
							<th>IP</th>
							<th>操作时间</th>
							<th>操作内容</th>
						</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
		<i class="icon-double-angle-up icon-only bigger-110"></i>
	</a>

</div><!-- /.main-container -->



<!-- basic scripts -->
<div th:replace="commons/html-js"></div>

<!-- inline scripts related to this page -->
<script th:src="@{/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}" />
<script th:src="@{/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"/>

<script>
    var c_LOGIN_NAME,c_START_TIME,c_END_TIME;
    queryForList = function() {
        var reqData = {};
        if ("" != c_LOGIN_NAME) {
            reqData.c_LOGIN_NAME = c_LOGIN_NAME;
        }
        if("" != c_START_TIME) reqData.c_START_TIME=c_START_TIME;
        if("" != c_END_TIME) reqData.c_END_TIME=c_END_TIME;
        $.post(contextPath + "/logs/list" , reqData , function (data) {
            var html = '';
            //<![CDATA[
            if (null != data && data.length > 0) {
                for (var i = 0; i<data.length; i ++) {
                    html += '<tr>';
                    html +=
                        '<td class="center">' + (i+1) + '</td>' +
                        '<td><div title="' + data[i].c_LOGIN_NAME + '">' + data[i].c_LOGIN_NAME + '</div></td>' +
                        '<td><div title="' + (null == data[i].c_LOGIN_IP ? '' : data[i].c_LOGIN_IP) + '">' + (null == data[i].c_LOGIN_IP ? '' : data[i].c_LOGIN_IP) + '</div></td>' +
                        '<td><div title="' + (null == data[i].c_LOGIN_TIME ? '' : data[i].c_LOGIN_TIME) + '">'+(null == data[i].c_LOGIN_TIME ? '' : data[i].c_LOGIN_TIME)+'</div></td>' +
                        '<td>' + ('OPERATE_STATUS_SUCCESS' == data[i].c_LOG_STATUS ? '成功' : '失败') + '</td>' +
                        '<td>';//</td>';
                    if ('OPERATE_STATUS_SUCCESS' == data[i].c_LOG_STATUS) {
                        html +='<button class="btn btn-xs btn-primary" onclick="showDetail(\'' + data[i].c_LOG_ID + '\')">操作详情</button></td>';
                    } else {
                        html += '</td>';
                    }
                    //
                    html += '</tr>';
                }

            }
            // ]]>
            $("#tbl tbody").html(html);
        })
    };
    showDetail = function (c_LOG_ID) {
        $("#detail_tbl tbody").html("");
        $.post(contextPath + "/logs/" + c_LOG_ID + "/opr-list" , function (data) {
            // <![CDATA[
            if (null != data && data.length > 0) {
                var html = '';
                var tr = '<tr><td>{{0}}</td><td>{{1}}</td><td>{{2}}</td><td><div title="{{3}}">{{3}}</div></td></tr>';
                for (var i = 0; i < data.length; i ++) {
                    html +=
                        tr.replace(/\{\{0\}\}/gi,data[i].c_LOGIN_NAME)
                            .replace(/\{\{1\}\}/gi,data[i].c_LOGIN_IP)
                            .replace(/\{\{2\}\}/gi,data[i].c_LOGIN_TIME)
                            .replace(/\{\{3\}\}/gi,data[i].c_OPERATE_DETAIL);
                }
                $("#detail_tbl tbody").html(html);

            }
            $("#detail_model").modal();
            // ]]>
        });

    };
    $(document).ready(function () {
        queryForList();
        $("#btn-search").on("click" , function () {
            c_LOGIN_NAME = $("#c_LOGIN_NAME").val();
            //c_START_TIME = $("#c_START_TIME").val();
            //c_END_TIME = $("#c_END_TIME").val();
            queryForList();
        });

        //结束时间：
        $('#c_END_DATE').datetimepicker({
            format: 'yyyy-mm-dd',//日期的格式
            startDate:'2000-01-01',//选择器的开始日期
            autoclose:true,//日期选择完成后是否关闭选择框
            todayBtn:true,//今日按钮
            bootcssVer:3,//显示向左向右的箭头
            language:'zh-CN',//语言
            minView: "month",//表示日期选择的最小范围，默认是hour
            endDate : new Date()
        });
        $('#c_START_TIME').datetimepicker({
            format: 'yyyy-mm-dd',//日期的格式
            startDate:'2000-01-01',//选择器的开始日期
            autoclose:true,//日期选择完成后是否关闭选择框
            todayBtn:true,//今日按钮
            bootcssVer:3,//显示向左向右的箭头
            language:'zh-CN',//语言
            minView: "month",//表示日期选择的最小范围，默认是hour
            endDate : new Date()
        }).on('changeDate',function(e){
            var startTime = e.date;
            $('#c_END_DATE').datetimepicker('setStartDate',startTime);
        });


        $('#c_END_DATE').on('changeDate',function(e){
            var endTime = e.date;
            $('#c_START_TIME').datetimepicker('setEndDate',endTime);
        });


    });
</script>
</body>

</html>

